<ul>
  <li class="calc-main">
    <a href="#" class="calc" title="Open Calculator" role="button" aria-controls="calculator_wrapper" aria-expanded="false">Open Calculator</a>
    <div id="calculator_wrapper">
      <form id="calculator">
        <div class="input-wrapper">
          <input type="text" id="calculator_input" tabindex="-1" />
          <div class="help-wrapper">
            <a id="calculator_hint" href="#" role="button" aria-haspopup="true" tabindex="-1">Hints</a>
            <ul id="calculator_input_help" class="help" aria-activedescendant="hint-integers" role="tooltip" aria-hidden="true">
                <li class="hint-item" id="hint-moreinfo" tabindex="-1">
                  <p>
                    <span class="bold">For detailed information, see
                      <a id="hint-link-first" href="http://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/completing_assignments/SFD_mathformatting.html#math-formatting">Entering Mathematical and Scientific Expressions</a> in the
                      <a id="hint-link-second" href="http://edx-guide-for-students.readthedocs.io/en/latest/index.html">EdX Learner's Guide</a>.
                    </span>
                  </p>
                </li>
                <li class="hint-item" id="hint-integers" tabindex="-1"><p><span class="bold">Integers:</span> 2520</p></li>
                <li class="hint-item" id="hint-decimals" tabindex="-1"><p><span class="bold">Decimals:</span> 3.14 or .98</p></li>
            </ul>
          </div>
        </div>
        <input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" />
        <input type="text" id="calculator_output" readonly tabindex="-1" />
      </form>
    </div>
  </li>
</ul>
